<template>
  <div class="detail" @click="pathPush">
    <div class="img_parent">
      <img :src="detailitem.img" style="width: 100%;" alt="">
      <div class="bottom">
        <span class="video"><i class="icon-play2"></i> 66</span>
        <span class="comment"><i class="icon-file-text"></i> {{detailitem.commentlen ? detailitem.commentlen : 66}}</span>
      </div>
    </div>
    <p>{{detailitem.name}}</p>
  </div>
</template>

<script>
export default {
  props: ['detailitem'],
  methods: {
    pathPush () {
      if (this.$route.path !== `/article/${this.detailitem.id}`) {
        this.$router.push(`/article/${this.detailitem.id}`)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.detail {
  font-size: 3.333vw;
  .img_parent {
    position: relative;
    // .video {
    //   position: absolute;
    //   left: 1.944vw;
    //   bottom: 1.389vw;
    // }
    // .comment {
    //     position: absolute;
    //     right: 1.944vw;
    //     bottom: 1.389vw;
    // }
    .bottom {
        background: linear-gradient(0deg,rgba(0,0,0,.85),transparent);
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 2px 7px;
        display: flex;
        justify-content: space-between;
        color: white;
    }
  }
}
</style>
